<template>
  <div class="leftTreeCom">
    <div class="leftTreeCom-bottom">
      <div v-if="pathName == 'IndexMgt'" class="IndexMgt">
        <el-input @on-blur="() => { this.isInputShowCollect = false }" size="mini" v-model="treeSearchCollect" placeholder="搜索" clearable style="margin-bottom: 10px;margin-top: 10px;">
          <i slot="suffix" class="el-input__icon el-icon-search" v-show="treeSearchCollect === ''"></i>
        </el-input>
        <el-tree @node-click="nodeClick" :allow-drop="allowDropCollect" @node-collapse="nodeCollapse" :default-expanded-keys="defaultExpandedKeys" draggable :expand-on-click-node="false" @node-expand="(data) => { this.$store.commit('getdefaultExpandedKeys', { pathName: this.pathName, value: data.id }) }" :auto-expand-parent="autoExpandParent" @node-drop="handleDrop" :filter-node-method="filterNode" ref="elTreeCollect" node-key="id" highlight-current :data="treeDataCollect" :renderContent="renderContentCollect" @current-change="currentChangeCollect"></el-tree>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "leftTreeCom",
  props: {
    treeType: {
      type: String,
      default: ''
    },
    title: { // 目录名称
      type: String,
      default: ""
    },
    treeData: { // 树节点数据(title为显示值)
      type: Array,
      default: []
    },
    treeDataCollect: { // 收藏的树节点数据
      type: Array,
      required: false,
      default: () => []
    },
    isInput: { // 是否显示搜索
      type: Boolean,
      default: false
    },
    pathName: { // 当前路径[必传]
      type: String,
      required: true,
      default: ""
    },
    isAction: {  // 是否显示树节点操作
      type: Boolean,
      default: true
    },
    Uninner: { // 拖拽时不可放在节点里面
      type: Boolean,
      default: false
    },
    isShowDeUpGrede: { // 是否显示升降级
      type: Boolean,
      default: false
    },
    autoExpandParent: { // 展开子节点的时候是否自动展开父节点
      type: Boolean,
      default: true
    },
    currentVisionNode: {
      type: Object,
      default: () => {}
    }
  },
  /**
   * colDataType:'SYS'为系统内置节点，不可以删除，编辑，移动
   */
  data () {
    return {
      currentTreeKey: -1,
      currentUserLabel: -1,
      tabsValue: 'Label',
      isInputShowCollect: false,
      isHoveId: '',
      treeSearchLabel: '',
      treeSearch: "",
      treeSearchCollect: '',
      treeSearchIndex: '',
      dimension: require("@/assets/images/cc/dimension.svg"),
      dimensionSelect: require("@/assets/images/cc/dimensionSelect.svg"),
      add: require("@/assets/images/cc/add.svg"),
      edit: require("@/assets/images/cc/edit.svg"),
      delete: require("@/assets/images/cc/delete.svg"),
      search: require("@/assets/images/cc/search.svg"),
      move: require("@/assets/images/cc/move.svg"),
      more: require("@/assets/images/cc/more.svg"),
      folderOpen: require("@/assets/images/cc/folderOpen.svg"),
      folder: require("@/assets/images/cc/folder.svg"),
      folderSelect: require("@/assets/images/cc/folderSelect.svg"),
      folderOpenSelect: require("@/assets/images/cc/folderOpenSelect.svg"),
      file: require("@/assets/images/cc/file.svg"),
      fileSelect: require("@/assets/images/cc/fileSelect.svg"),
      check: require("@/assets/images/lm/check.svg")
    }
  },
  computed: {
    defaultExpandedKeys () {
      return this.$store.state.defaultExpandedKeys[this.pathName]
    }
  },
  watch: {
    treeSearch (val) {
      this.$refs.elTree.filter(val)
    },
    treeSearchLabel (val) {
      this.$refs.elTreeLabel.filter(val)
    },
    treeSearchCollect (val) {
      this.$refs.elTreeCollect.filter(val)
    },
    treeSearchIndex (val) {
      this.$refs.elTreeIndex.filter(val)
    }
  },
  methods: {
    // 升降级
    upgradeDeMoteFunc (type, data, node) {
      let obj = {}
      obj.ids = []
      obj.id = data.id
      if (type == 'upgrade') {
        let parentId = node.parent.data.id
        obj.pid = node.parent.parent.level !== 0 ? node.parent.parent.data.id : -1
        node.parent.parent.childNodes.forEach(item => {
          obj.ids.push(item.data.id)
        })
        const index = obj.ids.findIndex(item => item === parentId)
        obj.ids.splice(index + 1, 0, obj.id)
        this.$store.commit('getdefaultExpandedKeys', { pathName: this.pathName, value: data.pid })
        // if(this.defaultExpandedKeys.indexOf(data.pid)===-1){
        //   this.defaultExpandedKeys.push(data.pid)
        // }
      } else {
        const indexC = node.parent.childNodes.findIndex(item => item.data.id === obj.id)
        const targetParentN = node.parent.childNodes[indexC - 1]
        obj.pid = targetParentN.data.id
        if (targetParentN.childNodes.length != 0) {
          targetParentN.childNodes.forEach(item => {
            obj.ids.push(item.data.id)
          })
          obj.ids.push(obj.id)
        } else {
          obj.ids.push(obj.id)
        }
        this.$store.commit('getdefaultExpandedKeys', { pathName: this.pathName, value: targetParentN.data.id })
        // if(this.defaultExpandedKeys.indexOf(targetParentN.data.id)===-1){
        //   this.defaultExpandedKeys.push(targetParentN.data.id)
        // }
      }

      if (this.pathName == 'DimensionMgt') {
        this.Api.dimCatalogSort({ id: data.id, pid: obj.pid, ids: obj.ids.join() }).then(res => {
          this.$emit('updataTree', res.data)
        })
      }
    },
    // 放置时目标节点是否被放置
    allowDrop (draggingNode, dropNode, type) {
      if (this.Uninner && type == 'inner' || draggingNode.data.isAdd) {
        return false
      } else {
        return true
      }
    },
    allowDropCollect (draggingNode, dropNode, type) {
      if (draggingNode.data.colDataType !== undefined && (draggingNode.data.colDataType.indexOf('SYS') == 0) || (dropNode.data.colDataType !== undefined && dropNode.data.colDataType.indexOf('SYS') == 0)) {
        return false
      }
      if (type == 'inner' || draggingNode.data.isAdd) {
        return false
      } else {
        return true
      }
    },
    handleDrop (draggingNode, dropNode, dropType, ev) {
      let obj = {}
      obj.ids = []
      obj.id = draggingNode.data.id
      if (dropType == 'inner') {
        obj.pid = dropNode.data.id
        dropNode.data.children.forEach(item => {
          obj.ids.push(item.id)
        })
        // if(this.defaultExpandedKeys.indexOf(dropNode.data.id)===-1){
        //   this.defaultExpandedKeys.push(dropNode.data.id)
        // }
        this.$store.commit('getdefaultExpandedKeys', { pathName: this.pathName, value: dropNode.data.id })
      } else {
        obj.pid = dropNode.parent.level != 0 ? dropNode.parent.data.id : -1
        if (dropNode.parent.level != 0) {
          dropNode.parent.data.children.forEach(item => {
            obj.ids.push(item.id)
          })
        } else {
          dropNode.parent.data.forEach(item => {
            obj.ids.push(item.id)
          })
        }
        this.$store.commit('getdefaultExpandedKeys', { pathName: this.pathName, value: draggingNode.data.pid })
        // if(this.defaultExpandedKeys.indexOf(draggingNode.data.pid)===-1){
        //   this.defaultExpandedKeys.push(draggingNode.data.pid)
        // }
      }
      if (this.pathName == "DimensionMgt") {
        this.Api.dimCatalogSort({ id: obj.id, pid: obj.pid, ids: obj.ids.join() }).then(res => {
          this.$emit('updataTree', res.data)
        }).catch(res => {
          this.$parent.getDimensionMgt()
        })
      } else if (this.pathName == "FieldMgt") {
        this.Api.fieldUsageFolderSort({ ids: obj.ids.join(',') }).then(res => {
          this.$emit('updataTree', res.data.data, draggingNode)
        }).catch(res => {
          this.$parent.getfieldUsageFolder()
        })
      } else if(this.pathName == 'IndStandardMgt' || this.pathName == 'IndexMgt'){
        this.Api.collectSort({ ids: obj.ids.join(','), id:obj.id , pid: -1 }).then(res => {
          this.$emit('updataTree', res.data.data, draggingNode)
        }).catch(res => {
          this.$parent.getCollectFolder()
        })
      }
    },
    nodeCollapse (data, node) {
      const index = this.defaultExpandedKeys.findIndex(item => item === data.id)
      if (index !== -1) {
        this.defaultExpandedKeys.splice(index, 1)
      }
    },
    saveNode (event, data, node, type) {
      console.log(event.target.value)
      console.log(data.id)
      console.log(this.pathName)
      if (event.target.value == "" && data.id == undefined) {
        data.title = ""
        if (this.pathName == 'LabelMgt') {
          this.$refs.elTreeLabel.remove(node)
        } else {
          this.$refs.elTreeCollect.remove(node)
        }
        return
      }
      if (data.id != undefined && event.target.value == "") {
        this.$Message.info(`${this.title}名称不能为空!`)
        return
      }
      if (this.pathName == "FieldMgt") {
        data.title = event.target.value
        let obj = {}
        obj.folderName = event.target.value
        obj.id = data.id
        obj.pid = -1
        obj.status = 1
        delete data.createTime
        this.Api[`saveFieldUsageFolder`](obj).then((res) => {
          data.isAdd = false
          this.$parent.getfieldUsageFolder('save')
        }).catch((res) => {})
      } else if (this.pathName == "DimensionMgt") {
        let obj = {}
        if (data.id == undefined && node.parent.level === 0) {
          data.title = event.target.value
          obj.name = event.target.value
          obj.pid = -1
        } else if (data.id == undefined && node.parent.level !== 0) {
          data.title = event.target.value
          obj.name = event.target.value
          obj.pid = node.parent.data.id
        } else if (data.id !== undefined) {
          data.title = event.target.value
          obj.name = event.target.value
          obj.id = data.id
          obj.pid = data.pid
        }
        delete data.createTime
        this.Api[`dimCatalogSave`](obj)
          .then((res) => {
            data.isAdd = false
            this.$parent.getDimensionMgt('save')
          })
          .catch((res) => { })
      } else if (this.pathName == "IndStandardMgt" || this.pathName == 'IndexMgt') {
        data.title = event.target.value
        let colDataType = {
          IndStandardMgt: 'STD',
          IndexMgt: 'INDEX'
        }
        let obj = {}
        obj.colDataType = type == 'index' ? 'INDEX_U' : colDataType[this.pathName]
        obj.colName = event.target.value
        obj.colNodeType = 'F'
        if (data.id == undefined && node.parent.level === 0) {
          obj.pid = -1
        } else if (data.id == undefined && node.parent.level !== 0) {
          obj.pid = node.parent.data.id
        } else if (data.id !== undefined) {
          obj.id = data.id
          obj.pid = data.pid
        }
        // this.Api.collectSave(obj).then(res => {
        //     data.isAdd = false
        //     this.$parent.getCollectFolder('save')
        // })
        if (this.treeType === 'visionClass') {
          this.Api.saveOrUpdateClass({
            asVisionId: this.currentVisionNode.data.id,
            name: event.target.value,
            pid: data.id ? undefined : node.parent.data.id,
            id: data.id
          }).then(res => {
            this.$message({
              message: `${data.id ? '编辑' : '新增'}成功`,
              type: 'success'
            })
            data.isAdd = false
            this.$parent.getClassTreeByVisionId(this.currentVisionNode)
          })
        } else {
          this.Api[node.level === 1 ? 'saveOrUpdateType' : 'saveOrUpdateVision']({
            id: data.id,
            asTypeId: node.level === 1 ? undefined : node.parent.data.id,
            name: event.target.value
          }).then(res => {
            this.$message({
              message: `${data.id ? '编辑' : '新增'}成功`,
              type: 'success'
            })
            data.isAdd = false
            this.$parent.getCollectFolder('save')
          })
        }
      } else if (this.pathName == 'LabelMgt') {
        let obj = {}
        obj.colDataType = 'LABEL'
        obj.colNodeType = 'F'
        obj.colName = event.target.value
        data.title = event.target.value
        if (this.tabsValue == 'myCollectLabel') {
          if (data.id == undefined && node.parent.level === 0) {
            obj.pid = -1;
            this.Api.collectSave({...obj}).then(res => {
              const index = this.treeDataCollect.findIndex(item => item == data)
              this.$emit('updataCollLabel', res.data, 'add', index)
              // this.$parent.getCollectTreeList()
            })
            } else if (data.id == undefined && node.parent.level !== 0) {
              obj.pid = node.parent.data.id
              this.Api.collectSave({...obj}).then(res => {
                const index = this.treeDataCollect.findIndex(item => item == data)
                this.$emit('updataCollLabel', res.data, 'edit', index)
                // this.$parent.getCollectTreeList()
              })
            } else if (data.id !== undefined) {
              obj.pid = data.pid
              obj.id = data.id
              this.Api.collectSave({...obj}).then(res => {
                const index = this.treeDataCollect.findIndex(item => item == data)
                this.$emit('updataCollLabel', res.data, 'edit', index)
                // this.$parent.getCollectTreeList()
              })
            }
        } else {
          const obj = {
            id: data.id ? data.id : '',
            pid: data.pid ? data.pid : -1,
            categoryName: event.target.value,
            categoryAbbr: '',
            categorySource: 'U'
          }
          this.Api.labelValidCategoryName({ categorySource: 'U', categoryName: event.target.value, id: data.id ? data.id : '', pid: data.pid ? data.pid : -1 }).then(res => {
            if (res.errmsg) {
              this.oss.showMessage({ type: 'info', content: res.errmsg })
              // this.$parent.searchListTree({})
            } else {
              this.Api.labelCategorySave(obj).then(res => {
                // this.oss.showMessage({ type: 'info', content: `${data.id ? '编辑' : '新增'}成功` })
                data.isAdd = false
                this.$emit('updataCate')
                // this.$parent.searchListTree({})
              })
            }
          })
        }
      }
    },
    filterNode (value, data) {
      if (!value) return true
      return (data.title || data.stdName || data.colName).indexOf(value) !== -1
    },
    addClick(type) {
      let obj = {}
      if (this.pathName == 'measureTreeMgt') {
        this.$emit('addMeasure', 'add')
        return
      }
      obj.isAdd = true
      setTimeout(() => {
        this.$refs.inputRef.focus()
      }, 200)
      this.$emit("addClick", obj,type)
    },
    nodeClick (data, node, dom) {
      this.$nextTick(() => {
        this.clearBackgroundColor()
        if (node.level == 2) {
          this.$emit('getClassTreeByVisionId', node) // 获取视角分类
          if (dom.$el.parentNode.parentNode.firstElementChild.style.paddingLeft == '0px') {
            dom.$el.parentNode.parentNode.firstElementChild.style.backgroundColor = 'rgba(116, 116, 128, 0.08)'
          }
        } else if (node.level == 3) {
          if (dom.$el.parentNode.parentNode.parentNode.parentNode.firstElementChild.style.paddingLeft == '0px') {
            dom.$el.parentNode.parentNode.parentNode.parentNode.firstElementChild.style.backgroundColor = 'rgba(116, 116, 128, 0.08)'
          }
        }
      })
    },
    clearBackgroundColor () {
      document.querySelectorAll('.el-tree-node__content').forEach((item, index) => {
        if (item.style.paddingLeft == '0px') {
          item.style.backgroundColor = ''
        }
      })
    },
    currentChange (data, node, tabVal) {
      if (this.pathName !== 'INDEX_3') {
        this.$parent.allStatus = false
        this.$parent.page.current = 1
        this.$store.state.title = 'index'
      }
      this.$store.state.currentSelect[this.pathName] = data // 记录当前选中项
      if (this.pathName == 'LabelMgt') {
        this.$emit("currentChange", data)
      } else {
        if (tabVal == "myStard") {
          this.$emit("currentChange", data, node, 'myStard')
        } else {
          this.$emit("currentChange", data, node)
        }
      }
    },
    currentChangeCollect (data, node) {
      this.currentTreeKey = this.$refs.elTreeCollect.getCurrentKey()
      this.$store.state.title = 'myCollect'
      this.$store.state.currentSelect[`${this.pathName}Collect`] = data // 记录当前选中项
      this.$emit('currentChangeCollect', data, node)
    },
    append(data) {
      const newChild = { title: "", isAdd: true, children: [] };
      if (!data.children) {
        this.$set(data, "children", []);
      }
      data.children.push(newChild);
      this.$nextTick(() => {
        setTimeout(() => {
          this.$refs.inputRef.focus();
          document.querySelector(".inputRef").select()
          document.querySelector(".inputRef .el-input__inner").select();
        }, 200)

      });
    },
    parentAppend(data, node) {
      const newChild = { title: "", isAdd: true, children: [] };
      if(this.pathName == 'LabelMgt'){
        this.$refs.elTreeLabel.append(newChild, node.parent)
      }else{
        this.$refs.elTreeCollect.append(newChild, node.parent)
      }
      
      this.$nextTick(() => {
        // setTimeout(() => {
          this.$refs.inputRef.focus()
          document.querySelector(".inputRef").select()
          document.querySelector(".inputRef .el-input__inner").select()
        // }, 200)
      })
    },
    clearHoverId() {
      if(this.pathName == 'LabelMgt'){
        if (this.$refs.elTreeLabel.getNode(this.isHoveId)) {
          this.$refs.elTreeLabel.getNode(this.isHoveId).data.isHove = false
          this.$refs.elTreeLabel.getNode(this.isHoveId).data.isdropClick = false
          this.isHoveId = ''
        }
        return
      }
      if (this.$refs.elTree.getNode(this.isHoveId)) {
        this.$refs.elTree.getNode(this.isHoveId).data.isHove = false
        this.$refs.elTree.getNode(this.isHoveId).data.isdropClick = false
        this.isHoveId = ''
      }
    },
    clearHoverIdCollect() {
      if (this.$refs.elTreeCollect.getNode(this.isHoveId)) {
        this.$refs.elTreeCollect.getNode(this.isHoveId).data.isHove = false
        this.$refs.elTreeCollect.getNode(this.isHoveId).data.isdropClick = false
        this.isHoveId = ''
      }
    },
    deleteFunc(data, node) {
      if (this.pathName == "FieldMgt") {
        this.$Modal.confirm({
          title: "提示",
          content: `确认删除字段用途类型<span style="color:red">${this.oss.xssHandle(data.title)}</span>吗？`,
          onOk: () => {
            this.Api.deleteFieldUsageFolder({
              ids: data.id,
            }).then((res) => {
              this.$parent.getfieldUsageFolder('delete', data);
            });
          },
        });
      }else if(this.pathName=='measureTreeMgt'){
        this.$Modal.confirm({
          title: "提示",
          content: `确认删除度量类型<span style="color:red">${this.oss.xssHandle(data.title)}</span>吗？`,
          onOk: () => {
            this.Api.deleteMeasure({
              ids: data.id,
            }).then((res) => {
              this.$parent.getDimensionMgt('delete', data);
            });
          },
        });
      } else if (this.pathName == "DimensionMgt") {
        this.$Modal.confirm({
          title: "提示",
          content: `确认删除维度<span style="color:red">${this.oss.xssHandle(data.title)}</span>吗？`,
          onOk: () => {
            this.Api.dimCatalogDelete({
              ids: data.id,
            }).then((res) => {
              this.$parent.getDimensionMgt('delete', data);
            });
          },
        });
      } else if(this.pathName == 'IndStandardMgt' || this.pathName == 'IndexMgt'){
        // this.$Modal.confirm({
        //   title: "提示",
        //   content: `确认删除收藏夹<span style="color:red">${this.oss.xssHandle(data.title)}</span>？`,
        //   onOk: () => {
        //     this.Api.collectDelete({
        //       ids: data.id,
        //     }).then((res) => {
        //       this.$parent.getCollectFolder('delete', data);
        //     });
        //   },
        // });
        this.$confirm(`确认删除<span style="color:red">${data.title}</span>？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          dangerouslyUseHTMLString: true
        }).then(() => {
          if (this.treeType === 'visionClass') {
            let ids = []
            ids.push(data.id)
            let fun = arr => {
              for (let i = 0; i < arr.length; i++) {
                ids.push(arr[i].id)
                if (arr[i].children.length > 0) fun(arr[i].children)
              }
            }
            fun(data.children)
            this.Api.deClassByClassId({
              id: ids.join()
            }).then(res => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.$parent.getClassTreeByVisionId(this.currentVisionNode)
            }).catch(err => {
              this.$message({
                type: 'error',
                message: '删除失败!'
              })
            })
          } else {
            this.Api[node.level === 1 ? 'delTypeByTypeId' : 'delVisionByVisionId']({
              id: data.id
            }).then(res => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.$parent.getCollectFolder('delete', data)
              this.$emit('updataVision')
            }).catch(err => {
              this.$message({
                type: 'success',
                message: '删除失败!'
              })
            })
          }
        }).catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消删除'
          // })
        })
      }else if(this.pathName == 'LabelMgt'){
        // 删除收藏夹
        if(this.tabsValue == 'myCollectLabel'){
          this.oss.showModal({
              type: 'confirm',
              title: '确认删除',
              content: '请确认是否删除选中的收藏夹？',
              onOk: () => {
                  if (data.dataCount != 0) return this.$Message.warning('非空目录无法删除')
                  this.Api.deleteCollectFile({ ids: data.id }).then(res => {
                      this.oss.showMessage({ type: 'info', content: '删除成功' })
                      const index = this.treeDataCollect.findIndex(item=>item==data)
                      this.$emit('updataCollLabel', '','delete',index)
                  })
              }
          })
        }
        else{
          this.Api.labelCategoryValidDelete({ id: data.id }).then(res => {
              if (res.data && res.data.code == '1') {
                  this.$parent.$refs.delete_label_dir.deleteModal = true
                  this.$parent.$refs.delete_label_dir.data = res.data.data
              } else if (res.data && res.data.code == '2') {
                  this.$parent.$refs.delete_label_dir.dirModal = true
                  this.$parent.$refs.delete_label_dir.dirObj = data
                  this.$parent.$refs.delete_label_dir.dirData = res.data.data
              } else {
                  this.oss.showModal({
                      type: 'confirm',
                      title: '确认删除',
                      content: '请确认是否删除选中标签目录？',
                      onOk: () => {
                           this.Api.labelCategoryDelete({ ids: data.id, categorySource: 'U' }).then(res => {
                              this.oss.showMessage({ type: 'success', content: '删除成功！' })
                              this.$emit('updataCate')
                          })
                      }
                  })
              }
          })
        }
      }
    },
    //给一级目录换肤色
    changeBackground(color) {
      // document.querySelectorAll('.el-tree-node__content').forEach((item,index) => {
      //   // if(item.style.backgroundColor=='#f0f7ff'){
      //   // }
      //   if (item.style.paddingLeft == '0px') {
      //     item.style.backgroundColor = color;
      //   }
      // })
      document.querySelectorAll('.el-tree-node__content')[0].style.backgroundColor = color
    },
    //收藏的自定义
    renderContentCollect(h, { root, node, data }){
      return h(
        "span",
        {
          style: {
            height: '100%',
            width: "calc(100% - 21px)",
            display: "flex",
            "justify-content": "space-between",
            "align-items": "center",
          },
          on: {
            mouseenter: (e) => {
              this.$set(data, "isHove", true);
            },
            mouseleave: (e) => {
              if (!data.isdropClick) {
                this.$set(data, "isHove", false);
              }
            },
            click: () => {
              this.clearHoverIdCollect()
            }
          },
        },
        [
          h(
            "span",
            {
              style: {
                width: "calc(100%)",
                display: "flex",
                "justify-content": "space-between",
                "align-items": "center",
              },
              on: {
                click: (e) => {
                  if (data.isAdd) {
                    e.stopPropagation();
                  }
                },
              },
            },
            [
              data.isAdd == true
                // ? this.$createElement("el-input", {
                //   ref: "inputRef",
                //   class: "inputRef",
                //   style: {
                //     width: "100%",
                //   },
                //   props: {
                //     value: data.title,
                //     size: "mini",
                //     // autofocus: true,
                //   },
                //   on: {
                //     "on-enter": (event) => {
                //       event.target.blur()
                //       // this.saveNode(event, data, node);
                //     },
                //     "blur": (event) => {
                //       this.saveNode(event, data, node)
                //       this.$forceUpdate()
                //     },
                //     'input': value => {
                //       this.$set(data, 'title', value)
                //     }
                //   },
                // })
                ? this.$createElement('input', {
                  ref: 'inputRef',
                  class: 'inputRef',
                  attrs: {
                    value: data.title
                  },
                  on: {
                    blur: e => {
                      this.saveNode(e, data, node)
                      this.$forceUpdate()
                    },
                    keydown: e => {
                      if (e.keyCode === 13) {
                        this.$refs.inputRef.blur()
                      }
                    }
                  }
                })
                : h(
                  "span",
                  {
                    class: "spanSelect",
                    style: {
                      "font-size": "14px",
                      // width: "90%",
                      // width: data.isHove ? (data.type=='catalogue'?'calc(100% - 66px)':'calc(100% - 22px)') : 'calc(100%)',
                      width: data.isHove == true && !data.isAdd && data.colDataType!=='SYS'&&data.title!=='默认分组'&&data.title!=='默认收藏夹' && data.labelComment == undefined  ? ('calc(100% - 66px)') : 'calc(100%)', //labelComment如果有值则代表着是标签的(收藏或用户标签)的子集（不可进行编辑新增等操作）
                      display: "inline-block",
                    },
                  },
                  [
                    data.icon!==undefined&&data.icon!==''?h("img", {
                      class: "svgColor",
                      attrs: {
                        src:
                          node.isCurrent && node.expanded ? this[`${data.icon}OpenSelect`] : (node.isCurrent && !node.expanded ? this[`${data.icon}Select`] : (!node.isCurrent && node.expanded ? this[`${data.icon}Open`] : this[`${data.icon}`]))
                      },
                      style: {
                        "vertical-align": "middle",
                        //   "margin-bottom": "3px",
                        color:
                          data.objType == "sql" ? "" : "rgb(125 127 128)",
                        marginRight: "5px",
                        width: "14px",
                        height: "14px",
                      },
                    }):'',
                    h(
                      "span",
                      {
                        style: {
                          width: data.icon!==undefined&&data.icon!==''?"calc(100% - 20px)":'100%',
                          display: "inline-block",
                          "vertical-align": "middle",
                        },
                      },
                      [
                        h("el-tooltip", {
                          props: {
                            // content: data.title,
                            content: data.title + `(${data.dataCount!==undefined&&data.dataCount!==0&&data.dataCount!==''? data.dataCount:0})`,
                            placement: "top",
                            'max-width':"200",
                            transfer: true,
                            effect: 'light',
                            enterable: false,
                            'open-delay': 150
                          },
                          style: {
                            // 'max-width': data.isHove == true && !data.isAdd && data.colDataType!=='SYS' ? 'calc(100% - 28px)' : '100%'
                            'max-width': '100%'
                          }
                        }, [
                          h("span",
                            {
                              style: {
                                // color: node.isCurrent == true ? '#2B96FF' : '',
                                width: '100%',
                                overflow: "hidden",
                                "white-space": "nowrap",
                                "text-overflow": "ellipsis",
                                'vertical-align': 'middle',
                                display: 'inline-block'
                              }
                            },
                            data.title + `(${data.dataCount!==undefined&&data.dataCount!==0&&data.dataCount!==''? data.dataCount:0})`,
                          ),
                        ]),
                        
                      ]
                    ),
                  ]
                ),
              data.isHove == true && !data.isAdd 
                ? h(
                  "span",
                  {
                    style: { display: "inline-block", float: "right" },
                    on: {
                      click: (e) => {
                        e.stopPropagation();
                      },
                    },
                  },
                  [
                    //labelComment如果有值则代表着是标签的(收藏或用户标签)的子集（不可进行编辑新增等操作）
                   data.colDataType!=='SYS'&&data.labelComment == undefined&&data.title!=='默认收藏夹'&&data.title!=='默认分组' ?h("img", {
                          attrs: {
                            src: this.edit,
                          },
                          style: {
                            "vertical-align": "middle",
                            // 'margin-bottom': '3px',
                            color: data.objType == "sql" ? "" : "rgb(125 127 128)",
                            marginRight: "7px",
                            width: "14px",
                            height: "14px"
                          },
                          on: {
                            click: (e) => {
                              e.stopPropagation()
                              this.clearHoverIdCollect()
                              data.isAdd = true
                              data.isHove = false
                              this.$nextTick(() => {
                                this.$refs.inputRef.focus()
                                document.querySelector(".inputRef").select()
                                document.querySelector(".inputRef .el-input__inner").select()
                              })
                            }
                          }
                        }) : '',
                    // this.pathName === 'DimensionMgt' || this.pathName === 'FieldMgt'
                       h(
                        "el-dropdown",
                        {
                          props: {
                            placement: "bottom-end",
                            trigger: "click",
                            transfer: true,
                            size: 'medium'
                          },
                          on: {
                            'command': (name) => {
                              console.log(name)
                              switch (name) {
                                case 'sub':
                                  this.$store.commit('getdefaultExpandedKeys', { pathName: this.pathName, value: data.id })
                                  // if(this.defaultExpandedKeys.indexOf(data.id)===-1){
                                  //   this.defaultExpandedKeys.push(data.id)
                                  // }
                                  this.append(data);
                                  break;
                                case 'peer':
                                  this.parentAppend(data, node)
                                  break
                              }
                            },
                            "visible-change": (val) => {
                              data.isdropClick = val
                              data.isHove = val
                              if (val) {
                                this.isHoveId = data.id
                              } else {
                                this.isHoveId = false
                              }
                            },
                          }
                        }, [
                        h("img", {
                          attrs: {
                            src: this.add,
                          },
                          style: {
                            "vertical-align": "middle",
                            // 'margin-bottom': '3px',
                            color: data.objType == "sql" ? "" : "rgb(125 127 128)",
                            marginRight: "5px",
                            width: "14px",
                            height: "14px",
                            marginRight: "8px",
                          },
                          on: {
                            click: () => {
                              this.clearHoverIdCollect()
                            },
                          }
                        }),
                        h(
                          "el-dropdown-menu",
                          {
                            slot: "dropdown",
                          },
                          [
                            h(
                              "el-dropdown-item",
                              {
                                props: {
                                  command: "peer",
                                },
                              }, '添加同级分类'),
                            this.pathName === 'DimensionMgt'||true?h(
                              "el-dropdown-item",
                              {
                                props: {
                                  command: "sub",
                                },
                              }, '添加下级分类'):''
                            // this.tabsValue!=='userLabel'? h(
                            //   "el-dropdown-item",
                            //   {
                            //     props: {
                            //       command: "sub",
                            //     },
                            //   }, '添加下级分类'):''
                          ]
                        )
                      ]) ,
                      data.colDataType!=='SYS'&&data.labelComment == undefined&&data.title!=='默认收藏夹'&&data.title!=='默认分组'?h(
                      "el-dropdown",
                      {
                        props: {
                          placement: "bottom-end",
                          trigger: "click",
                          transfer: true,
                          size: 'medium'
                        },
                        on: {
                          'command': (name) => {
                            switch (name) {
                              case 'delete':
                                this.deleteFunc(data, node)
                                break
                              case 'upgrade':
                                console.log(data.pid === '0')
                                console.log(data.id)
                                console.log(node.previousSibling.data.id)
                                if (this.treeType === 'visionClass') {
                                  this.Api.classNodeMove({
                                    curryId: data.id,
                                    moveId: node.previousSibling.data.id
                                  }).then(res => {
                                    this.$message({
                                      message: '上移成功',
                                      type: 'success'
                                    })
                                    this.$parent.getClassTreeByVisionId(this.currentVisionNode)
                                  }).catch(err => {
                                    this.$message({
                                      message: '上移失败',
                                      type: 'error'
                                    })
                                  })
                                } else {
                                  this.Api[data.pid === '0' ? 'typeNodeMove' : 'visionNodeMove']({
                                    curryId: data.id,
                                    moveId: node.previousSibling.data.id
                                  }).then(res => {
                                    this.$message({
                                      message: '上移成功',
                                      type: 'success'
                                    })
                                    this.$parent.getCollectFolder()
                                  }).catch(err => {
                                    this.$message({
                                      message: '上移失败',
                                      type: 'error'
                                    })
                                  })
                                }
                                // this.upgradeDeMoteFunc('upgrade', data, node)
                                break
                              case 'demote':
                                console.log(data.pid === '0')
                                console.log(data.id)
                                console.log(node.nextSibling.data.id)
                                if (this.treeType === 'visionClass') {
                                  this.Api.classNodeMove({
                                    curryId: data.id,
                                    moveId: node.nextSibling.data.id
                                  }).then(res => {
                                    this.$message({
                                      message: '下移成功',
                                      type: 'success'
                                    })
                                    this.$parent.getClassTreeByVisionId(this.currentVisionNode)
                                  }).catch(err => {
                                    this.$message({
                                      message: '下移失败',
                                      type: 'error'
                                    })
                                  })
                                } else {
                                  this.Api[data.pid === '0' ? 'typeNodeMove' : 'visionNodeMove']({
                                    curryId: data.id,
                                    moveId: node.nextSibling.data.id
                                  }).then(res => {
                                    this.$message({
                                      message: '下移成功',
                                      type: 'success'
                                    })
                                    this.$parent.getCollectFolder()
                                  }).catch(err => {
                                    this.$message({
                                      message: '下移失败',
                                      type: 'error'
                                    })
                                  })
                                }
                                // this.upgradeDeMoteFunc('demote', data, node)
                                break
                            }
                          },
                          "visible-change": (val) => {
                            data.isdropClick = val;
                            data.isHove = val;
                            if (val) {
                              this.isHoveId = data.id
                            } else {
                              this.isHoveId = false
                            }
                          },
                        }
                      }, [
                      h("img", {
                        attrs: {
                          src: this.more,
                        },
                        style: {
                          "vertical-align": "middle",
                          // 'margin-bottom': '3px',
                          color: data.objType == "sql" ? "" : "rgb(125 127 128)",
                          marginRight: "5px",
                          width: "14px",
                          height: "14px",
                          marginRight: "8px"
                        },
                        on: {
                          click: () => {
                            this.clearHoverIdCollect()
                          }
                        }
                      }),
                      h(
                        "el-dropdown-menu",
                        {
                          slot: "dropdown"
                        },
                        [
                          this.isShowDeUpGrede ? h(
                            "el-dropdown-item",
                            {
                              props: {
                                command: 'upgrade',
                                disabled: data.sort == 1
                              },
                            }, '升级') : '',
                          this.isShowDeUpGrede ? h(
                            "el-dropdown-item",
                            {
                              props: {
                                command: 'demote',
                                disabled: node.parent.childNodes.length === data.sort
                              },
                            }, '降级') : '',
                          h(
                            "el-dropdown-item",
                            {
                              props: {
                                command: 'delete',
                                divided: true
                              }
                            }, '删除')
                        ]
                      )
                    ]) : ''
                  ]
                ) : ''
            ]
          )
        ]
      )
    }
  }
}
</script>

<style lang="less" scoped>
.leftTreeCom {
  .w(250px);
  // .h(100%);
  // height: calc(100% - 40px);
  padding: 10px 15px;
  box-shadow: 0px 1px 12px #e6e6e6;
  float: left;
  .b(#fff);
  border-radius: 4px;
  position: relative;
  //  overflow: auto;
   .addTree{
      cursor: pointer;
      margin-bottom: 10px;
      border: 1px dashed #C2C2C2;
      padding:0 5px 0 12px;
      color: #999999;
      span{
        &:nth-of-type(1){
          margin-right: 10px;
          font-size: 23px;
          vertical-align: -3px;
        }
      }
   }
   /deep/.ivu-tabs-bar {
      margin-bottom: 10px;
    }
    .IndexMgt{
      height: 100%;
      /deep/ .ivu-tabs {
          height: 100%;
      }
      /deep/ .ivu-tabs-tab{
        &:nth-of-type(3){
          border-right: 0;
          border-left: 0;
        }
      }
      /deep/ .ivu-tabs .ivu-tabs-content-animated {
          height: calc(100% - 40px);
          .ivu-tabs-tabpane{
            height: 100%;
            overflow-y:auto ;
            &::-webkit-scrollbar-track {
              .b(#fff);
            }

            &::-webkit-scrollbar {
              width: 6px;
              height: 4px;
            }

            &::-webkit-scrollbar-button {
              display: none;
            }

            &::-webkit-scrollbar-thumb {
              background: #dddddd;
              border-radius: 2px;
            }
          }
          
      }
     /deep/ .ivu-tabs.ivu-tabs-card>.ivu-tabs-bar .ivu-tabs-tab {
          margin-right: 0px;
          padding: 5px 8px 4px;
          border-bottom: 0;
          border-radius: unset;
          &:nth-of-type(2){
            border-radius: 4px 0 0 0 !important;
          }
          &:nth-of-type(4){
            border-radius: 0px 4px 0 0 !important;
          }
      }
    }
    .LabelMgt{
      height: 100%;
      /deep/ .ivu-tabs {
          height: 100%;
      }
      /deep/ .ivu-tabs-tab{
        &:nth-of-type(3){
          border-right: 0;
          border-left: 0;
        }
      }
      /deep/ .ivu-tabs .ivu-tabs-content-animated {
          height: calc(100% - 42px);
          .ivu-tabs-tabpane{
            height: 100%;
            overflow-y:auto ;
            &::-webkit-scrollbar-track {
              .b(#fff);
            }

            &::-webkit-scrollbar {
              width: 6px;
              height: 4px;
            }

            &::-webkit-scrollbar-button {
              display: none;
            }

            &::-webkit-scrollbar-thumb {
              background: #dddddd;
              border-radius: 2px;
            }
          }
          
      }
     /deep/ .ivu-tabs.ivu-tabs-card>.ivu-tabs-bar .ivu-tabs-tab {
          margin-right: 0px;
          padding: 5px 8px 4px;
          border-bottom: 0;
          border-radius: unset;
          &:nth-of-type(2){
            border-radius: 4px 0 0 0 !important;
          }
          &:last-of-type{
            border-radius: 0px 4px 0 0 !important;
          }
      }
      /deep/ .ivu-tabs-nav-scrollable {
        padding: 0 15px;
      }
      /deep/.ivu-tabs-nav-next{
        width: 13px;
      }
      /deep/ .ivu-tabs-nav-prev {
        width: 13px;
      }
    }
    .ServiceMgt {
      /deep/ .ivu-tabs-tab {
        padding-left: 26px !important;
        padding-right: 26px !important;
        &:nth-of-type(3) {
          border-right: 1px solid #dcdee2;
          border-left: 1px solid #dcdee2;
        }
      }
    }
    .IndStandardMgt{
      height: 100%;
      /deep/ .ivu-tabs {
          height: 100%;
      }
      /deep/ .ivu-tabs .ivu-tabs-content-animated {
          height: calc(100% - 40px);
          .ivu-tabs-tabpane{
            height: 100%;
            overflow-y:auto ;
            &::-webkit-scrollbar-track {
              .b(#fff);
            }

            &::-webkit-scrollbar {
              width: 6px;
              height: 4px;
            }

            &::-webkit-scrollbar-button {
              display: none;
            }

            &::-webkit-scrollbar-thumb {
              background: #dddddd;
              border-radius: 2px;
            }
          }
          
      }
     /deep/ .ivu-tabs.ivu-tabs-card>.ivu-tabs-bar .ivu-tabs-tab {
          padding: 5px 26px 4px;
          margin-right: 0px;
          border-radius: unset;
          &:nth-of-type(2){
            border-radius: 4px 0 0 0 !important;
          }
          &:nth-of-type(3){
            border-radius: 0px 4px 0 0 !important;
          }
      }
    }
    &::-webkit-scrollbar-track {
      .b(#fff);
    }

    &::-webkit-scrollbar {
      width: 6px;
      height: 4px;
    }

    &::-webkit-scrollbar-button {
      display: none;
    }

    &::-webkit-scrollbar-thumb {
      background: #dddddd;
      border-radius: 2px;
    }

  /deep/.ivu-input-wrapper .ivu-input {
    font-size: 12px;
    border-top: 1px solid #ddd !important;
    border-right: 1px solid #ddd !important;
    border-left: 1px solid #ddd !important;
    border-radius: 3px;
  }

  /deep/.el-tree-node__content>.el-tree-node__expand-icon {
    padding: 3px;
    // margin-left: 14px;
  }

  /deep/ .ivu-tooltip-rel {
    width: 100%;
  }

  /deep/.el-tree-node__content {
    height: 30px;
    margin-bottom: 3px;
  }

  .leftTreeCom-top {
    align-items: center;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;

    .title {
      // flex:1;
      font-family: PingFangSC;
      color: #202020;
      font-weight: 500;
      font-size: 16px;
    }

    .action {
      display: flex;
      justify-content: flex-end;
    }

    .addCom {
      margin-right: 10px;
      width: 14px;
      height: 14px;
      font-size: 16px;
      display: flex;
      align-items: center;
      cursor: pointer;
    }
  }

  .leftTreeCom-bottom {
    // height: calc(100% - 24px);
    // overflow: auto;

    // &::-webkit-scrollbar-track {
    //   .b(#fff);
    // }

    // &::-webkit-scrollbar {
    //   width: 6px;
    //   height: 4px;
    // }

    // &::-webkit-scrollbar-button {
    //   display: none;
    // }

    // &::-webkit-scrollbar-thumb {
    //   background: #dddddd;
    //   border-radius: 2px;
    // }
  }

  .content-wrapper {
    margin-top: 10px;
    .h(calc(~"100% - 42px"));
    overflow: auto;

    &::-webkit-scrollbar-track {
      .b(#fff);
    }

    &::-webkit-scrollbar {
      width: 6px;
      height: 4px;
    }

    &::-webkit-scrollbar-button {
      display: none;
    }

    &::-webkit-scrollbar-thumb {
      background: #dddddd;
      border-radius: 2px;
    }

    .tree-wrapper {
      margin-bottom: 10px;

      .tree-title {
        height: 35px;
        line-height: 35px;
        background: #f7f7f7;
      }

      .new-tree {
        padding-left: 25px;
        overflow: auto;
        .h(calc(~"100% - 35px"));
      }

      .new-tree::-webkit-scrollbar-track {
        .b(#fff);
      }

      .new-tree::-webkit-scrollbar {
        width: 4px;
        height: 4px;
      }

      .new-tree::-webkit-scrollbar-button {
        display: none;
      }

      .new-tree::-webkit-scrollbar-thumb {
        background: #dddddd;
        border-radius: 2px;
      }
    }
  }
}
</style>
